<template>
	<view class="field">
		<view class="field-cover">
			<view class="">
				<u--image showLoading="true"
				src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
				 width="100%" height="400rpx"></u--image>
			</view>
			<view class="field-cover-content field-padding">
				<view class="title">会议场地</view>
				<view class="phone">联系电话:010-68450751</view>
			</view>
		</view>
		
		<view class="field-tips field-padding">
			<view class="">预订日期</view>
			<view class="" @click="handleSelector">07月06日></view>
		</view>
		
		<view class="cell">
			<view class="cell-item" @click="handleDetails">
				<u--image showLoading="true"
				src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
				 width="280rpx" height="240rpx"></u--image>
				 <view class="cell-item-text">
					 <view class="title">六室一厅套房</view>
					 <view class="content">
						 <view class="">整套 400平方米10人</view>
						 <view class="">10人 7床 6居</view>
						 <view class="">取消订单将收取全部床费</view>
					 </view>
					 <view class="price">￥8888</view>
				 </view>
			</view>
		</view>
		<!-- 日期 -->
		<u-calendar :show="show" color="#f74062" mode="single" @close="show = false" @confirm="confirm"></u-calendar>
	</view>
</template>
<script>
export default {
	data(){
		return {
			show: false
		}
	},
	methods:{
		confirm(options){
			console.log(options)
			this.show = false
		},
		handleDetails(options){
			uni.navigateTo({
				url: "/homePages/meetingField/field/details"
			})
		},
		handleSelector(){
			this.show = true
		}
	}
}
</script>
<style lang="scss" scoped>
	.field{
		padding: 0 10rpx;
		.cell{
			box-shadow: 0 0 4rpx #cccccc;
			.cell-item{
				display: flex;
				padding: 20rpx;
				border-radius: 10rpx;
				&+ .cell-item{
					border-top: 2rpx solid #f2f2f2;
				}
				.cell-item-text{
					flex: 1;
					margin-left: 40rpx;
					position: relative;
					.price{
						position: absolute;
						right: 20rpx;
						bottom: 0rpx;
						color: red;
						font-size: 32rpx;
					}
					.title{
						font-size: 32rpx;
						font-weight: bold;
					}
					.content{
						margin-top: 10rpx;
					}
				}
			}
		}
		.field-tips{
			display: flex;
			justify-content: space-between;	
			margin: 40rpx 0;
			font-size: 30rpx;
		}
		.field-padding{
			padding: 0 10rpx;
		}
		.field-cover{
			.field-cover-content{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.title{
					font-size: 32rpx;
					font-weight: bold;
				}
				.phone{
					font-size: 24rpx;
				}
			}
		}
	}
</style>